<template>
  <div class="page_body">
    <!-- <HomeTop :topTitle="topTitle"></HomeTop> -->
    <div class="page">
      <div class="page_content">
        <div class="page_banner">
          <img class="banner_img" :src="record.image_path" alt="" />
        </div>
        <div class="page_title">
          <div class="page_title_box">
            <div class="title">{{ record.title }}</div>
            <div class="time">
              <img
                class="img_icon"
                src="../../assets/image/time_icon01.png"
                alt=""
              />
              <div>{{ record.start_date }}</div>
            </div>
            <div class="address">
              <img
                class="img_icon"
                src="../../assets/image/address_icon01.png"
                alt=""
              />
              <div>{{ record.address }}</div>
            </div>
          </div>
        </div>
        <div
          class="page_detail signOne"
          v-if="is_signin == 2 && record.in_signin_time == 1"
        >
          <div>
            <div class="sign_box" @click="goSign()">
              <div>
                <div class="sign_time">{{ nowTime }}</div>
                <div class="sign_title">签到</div>
              </div>
            </div>
            <div class="sign_msg">已到可签到时间</div>
          </div>
        </div>
        <div
          class="page_detail signTwo"
          v-if="is_signin == 2 && record.in_signin_time == 2"
        >
          <div>
            <div class="sign_box">
              <div>
                <div class="sign_time">{{ nowTime }}</div>
                <div class="sign_title">签到</div>
              </div>
            </div>
            <div class="sign_msg">未到可签到时间</div>
          </div>
        </div>
        <div class="page_detail signThree" v-if="is_signin == 1">
          <div>
            <div class="sign_box">
              <div>
                <div class="sign_imgBox">
                  <img
                    class="sign_img"
                    src="../../assets/image/sign_success.png"
                    alt=""
                  />
                </div>
                <div class="sign_time">{{ nowTime }}</div>
                <div class="sign_title">签到成功</div>
              </div>
            </div>
            <div class="sign_msg">已签到</div>
          </div>
        </div>
      </div>

      <!-- <div style="height: 1.8rem"></div> -->
    </div>
    <div class="page_bottom">
      <van-tabbar route>
        <van-tabbar-item
          replace
          :to="`/gameCenter/signIn?id=${id}`"
          icon="map-marked"
          >签到</van-tabbar-item
        >
        <van-tabbar-item
          replace
          :to="`/gameCenter/signList?id=${id}`"
          icon="label"
          >签到记录</van-tabbar-item
        >
      </van-tabbar>
    </div>
    <div style="height: 1.25rem"></div>
    <van-dialog
      v-model="show"
      title="提示"
      width="5.6rem"
      :showConfirmButton="false"
    >
      <div class="sign_dialog">
        <div v-if="dialogStatus == 0" style="font-size: 0.3rem; color: #fe6d68">
          签到查询有误
        </div>
        <img
          v-if="dialogStatus == 1"
          class="dialog_img"
          src="../../assets/image/sign_fail.png"
          alt=""
        />
        <img
          v-if="dialogStatus == 2"
          class="dialog_img"
          src="../../assets/image/sign_waring.png"
          alt=""
        />
        <div class="sign_fail" v-if="dialogStatus == 1">
          <div class="sign_fail_title">签到失败</div>
          <div>您不在该比赛执裁名单内</div>
        </div>
        <div class="sign_waring" v-if="dialogStatus == 2">
          <div class="sign_fail_title">您还没有注册裁判员</div>
          <div>请先完善裁判员信息</div>
        </div>
        <div
          v-if="dialogStatus == 0"
          class="sign_botton"
          @click="closeWindow()"
        >
          确认
        </div>
        <div
          v-if="dialogStatus == 1"
          class="sign_botton"
          @click="confirmClose()"
        >
          确认
        </div>
        <div
          v-if="dialogStatus == 2"
          class="sign_botton"
          @click="confirmComplete()"
        >
          确认
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<style src="../../assets/css/sign/signIn.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { TabContainer, TabContainerItem } from "mint-ui";
import { Indicator, Toast } from "mint-ui";
import { Dialog, Tabbar, TabbarItem } from "vant";

export default {
  name: "signIn",
  components: {
    HomeTop,
    [Dialog.Component.name]: Dialog.Component,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      topTitle: "裁判员签到", // 顶部组件参数设置
      record: {}, //详情信息
      is_signin: "", //是否已签到
      show: false, //提示弹窗展示判断
      nowTime: "", //当前时间
      dialogStatus: "", //1：签到失败 2：未注册裁判员
      active: 0,
      id: "", //二维码ID
    };
  },
  created() {
    this.id = this.$route.query.id;
    console.log(this.id);
    this.isComplete();
    this.nowTimes(); //获取时间的方法
    this.eventDetail();
  },
  mounted() {},

  methods: {
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      // let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
      this.nowTime = hh + ":" + mm;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      // 清除定时器，解决网页卡顿问题
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    },

    //点击签到判断是否完善信息
    isComplete() {
      let url = "/mobile/checkUserInfo";
      Indicator.open();
      this.axios
        .post(url)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            // 是否完善信息
            if (res.is_complete == "2") {
              // this.show = false;
            } else if (res.is_complete == "1") {
              this.show = true;
              this.dialogStatus = 2;
            }
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    //前往裁判员完善信息
    confirmComplete() {
      this.$router.push({
        name: "perfectReferees",
        query: {
          id: this.id,
        },
      });
    },
    //签到失败关闭弹窗
    confirmClose() {
      this.show = false;
    },
    //关闭当前窗口
    closeWindow() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        WeixinJSBridge.call("closeWindow");
      } else {
        window.location.href = "about:blank";
        window.close();
      }
    },
    //签到
    goSign() {
      let id = this.$route.query.id;
      let url = "/mobile/userSignin";
      let data = {
        id: id,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            Toast({
              message: "签到成功",
              duration: 3000,
            });
            this.eventDetail();
          }
          if (res.code == 1) {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
          if (res.code == 2) {
            this.dialogStatus = 1;
            this.show = true;
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    //比赛名称以及详情
    eventDetail() {
      let id = this.$route.query.id;
      let url = "/mobile/signinEventDetail";
      let data = {
        id: id,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            this.record = res.record;
            this.is_signin = res.is_signin;
          }
          if (res.code == 1) {
            this.dialogStatus = 0;
            this.show = true;
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
  },

  beforeDestroy() {
    // //销毁定时器
    // clearInterval(this.nowTimes);
    // this.nowTimes = null;
  },
};
</script>
